<template>
  <div v-if="!isNew && styleType == 1" class="">
    <section class="c-flex-row c-aligni-center c-p" id="tabsWrap" :class="[tabHeight > 0 ? 'c-hh' + tabHeight : 'c-hh76',flexClass,isScroll ? 'c-contextX-scroll' : '']">
      <div class="tab-item c-p c-flex-row c-h c-flex-shrink0 c-flex-center" :class="isScroll && index != tabList.length - 1 ? 'c-mr40':''" v-for="(item,index) in tabList" :key="index" @click="clickChangeTab(isGroupList || isSpreadMoney ? index : item.index)">
        <div :style="tabIndex == (isGroupList || isSpreadMoney ? index : item.index) && tabNameActiveStyle ? tabNameActiveStyle : ''" :class="[tabNameClass ? tabNameClass:'c-fs26',tabIndex == (isGroupList || isSpreadMoney ? index : item.index) ? fontSet.activeColor:fontSet.defaultColor]">{{isGroupList ? item.groupName : item.title}}</div>
        <slot  :name="isGroupList ? index : item.index"></slot >
        <div v-show="tabIndex == (isGroupList || isSpreadMoney ? index : item.index)" :style="tabActiveStyle" class="tab-icon c-text-hidden" :class="[tbaIconBg]"></div>
        <div v-if="item.smallNum && item.smallNum > 0" class="c-pa c-fs16 c-fc-gray c-p-t8 c-p-r0 translate-r100 c-ph8 c-br10 c-bg-f2 c-ws-n">{{item.smallNum > 999 ? '999+' : item.smallNum}}</div>
      </div>
    </section>
    <slot></slot>
  </div>
  <div v-else-if="styleType == 1" class="c-flex-row c-aligni-center c-hh76 c-p c-justify-sa tab-box">
    <div
      v-for="(item, index) in tabList"
      :key="item.index"
      class="c-flex-column c-flex-center c-fs28 c-flex-shrink0 c-p"
      :class="tabIndex == item.index ? 'tab-actived' : ''"
      @click="clickChangeTab(item.index, index)"
    >
      <span :class="tabIndex == item.index ? 'c-fs28 theme-fc c-fw600' : 'c-fc-sblack'">{{ item.title }}</span>
      <div v-if="item.smallNum && item.smallNum > 0" class="c-pa c-fs16 c-fc-gray p-t-8 c-p-r0 translate-r100 c-ph8 c-br10 c-bg-f2 c-ws-n">{{item.smallNum > 999 ? '999+' : item.smallNum}}</div>
    </div>
    <span :class="tbaLineBg" class="c-pa c-p-l0 c-p-b0 c-zindex1 c-hh6 c-ww32 c-br4 c-transition-duration3-10" :style="`transform: translateX(${transX}px) translateX(-50%);`"></span>
  </div>
  <div v-else-if="styleType == 2" class="c-flex-row c-aligni-center c-hh76 c-p c-pz1 c-content-scroll" :class="isLeft?'c-pl24':''">
    <div
      v-for="(item, index) in tabList"
      :id="`tab-${item.index}`"
      :key="item.index"
      class="c-flex-column c-flex-center c-fs24 c-p c-ws-n"
      :class="[tabIndex == item.index ? 'tab-actived' : '', item.smallText ? 'c-mr80' : 'c-mr60', flexClass2]"
      @click="clickChangeTab(item.index, index)"
    >
      <span :class="tabIndex == item.index ? 'c-fs26 c-fc-xblack c-p c-pz6 c-fw600' : 'c-fc-sblack c-p c-pz6'">{{ item.title }}</span>
      <div v-if="item.smallNum && item.smallNum > 0" class="c-fs20 c-ww40 c-fc-gray c-pa small-number-position">{{item.smallNum > 99 ? '99+' : item.smallNum}}</div>
      <div v-if="item.smallText" class="c-br10 c-fs16 c-hh28 c-ww40 c-flex-row c-flex-center theme-bg-10 theme-fc c-pa small-text-position">{{item.smallText}}</div>
    </div>
    <span :class="tbaLineBg" class="c-pa c-p-l0 c-p-b20 c-zindex1 c-hh8 c-ww48 c-br4 c-transition-duration3-10" :style="`transform: translateX(${transX}px) translateX(-50%);`"></span>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: 'MySmallTabbar',
  props: {
    tabList: {
      type: Array,
      default: () => {
        return []
      }
    },
    fontSet: {
      type: Object,
      default: () => {
        return {
          activeColor: 'c-fc-xblack',
          defaultColor: 'c-fc-gray',
          prodType: '',
        }
      }
    },
    tbaIconBg: {
      type: String,
      default: 'theme-bg'
    },
    tbaLineBg: {
      type: String,
      default: 'theme-bg'
    },
    tabIndex: {
      type: Number,
      default: 0,
    },
    tabHeight: {
      type: Number,
      default: 0,
    },
    tabNameClass: {
      type: String,
      default: '',
    },
    tabNameActiveStyle: {
      type: String,
      default: '',
    },
    tabActiveStyle: {
      type: String,
      default: '',
    },
    tabColorRGB: {
      type: String,
      default: '',
    },
    flexClass: {
      type: String,
      default: 'c-justify-sa', // justify-content
    },
    isScroll: {
      type: Boolean,
      defaulr: false
    },
    isGroupList: { // 商品分类
      type: Boolean,
      defaulr: false
    },
    isNew: {
      type: Boolean,
      defaulr: false
    },
    isSpreadMoney: { //分享收益
      type: Boolean,
      defaulr: false
    },
    styleType: {
      type: Number,
      default: 1,
    },
    isLeft: { // 是否靠左排列
      type:Boolean,
      default: false
    },
    flexClass2: { // 版式2的自定义样式
      type: String,
      default: '',
    },
  },
  computed: {
    cloroRGB() {
      return utilJs.getRgbStr(this.themeColor, this.tabColorRGB, 0.5);
    }
  },
  watch: {
    tabList: {
      handler() {
        this.$nextTick(() => {
          this.resetActivedTab();
          // 会有默认值transX初始化后还是为0的情况，加个定时器再赋值下
          setTimeout(() => {
            this.resetActivedTab();
          }, 500)
        });
      },
      immediate: true,
      deep: true
    },
    tabIndex: {
      handler() {
        this.$nextTick(() => {
          this.resetActivedTab();
        });
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      transX: 0,
      curIndex: 0
    }
  },

  methods: {
    scrollPosition(index) {
      if (!this.isScroll) {
        return;
      }
      if (document.getElementById('tabsWrap')) {
        document.getElementById('tabsWrap').scrollTo({
          left: document.getElementById('tabsWrap') ? document.getElementById('tabsWrap').childNodes[index].offsetLeft - 40 : 0,
          behavior: 'smooth'
        })
      }
    },
    clickChangeTab(index, PhyIndex) {
      let moveDir = 1; //1点击靠右的tab；2点击靠左的tab
      if (this.curIndex > PhyIndex) {
        moveDir = 2;
      } else {
        moveDir = 1;
      }
      if (this.isSpreadMoney) {
        this.prodType = this.tabList[index].prodType;
      }
      this.$emit('changeTab', index, moveDir, this.prodType);
      this.curIndex = PhyIndex;
    },
    resetActivedTab() {
      if (!this.tabList.length) {
        this.transX = "";
        return;
      }
      if (this.tabIndex == -1) {
        this.transX = "";
        return;
      }
      let curTabDom = document.querySelector(".tab-actived");
      if (!curTabDom) {
        return;
      }
      let offsetX = curTabDom.offsetLeft;
      let domWidth = curTabDom.clientWidth;
      this.transX = offsetX + domWidth / 2;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
.translate-r100 {
  transform: translate(100%, 0)
}
.c-transition-duration3-10 {
  transition:transform 0.15s;
  -webkit-transition:transform 0.15s; /* Safari and Chrome */
}
.p-t-8 {
  top: -0.2rem
}
.theme-live-room {
  .c-bg-xblue {
    background: var(--live-theme-color);
  }
  .c-active {
    color: var(--live-theme-tabcolor);
  }
}
.small-text-position {
  right: -1.1rem;
  top: 0.1rem;
  line-height: 0.7rem;
}
.small-number-position {
  right: -1.1rem;
  top: 0.15rem;
}
.c-mr80 {
  margin-right: 2rem;
}
</style>
